<template>
	<view class="personal" :style=" (userInfo && userInfo.token )? 'background-color : #F5F5F5;' : 'background-color:#fff;'">
		<!-- 顶部导航 -->
		<u-navbar 
		:title="(userInfo && userInfo.token) ? '个人中心' : '登陆或者注册'" 
		:is-back="false" 
		:background="navBgStyle" 
		title-color="#fff">
			<image class="logo" src="../../static/logo.jpg" mode="widthFix"></image>
		</u-navbar>
		
		<view class="content" v-if="userInfo && userInfo.token">
			<!-- 用户信息 -->
			<view class="per-info card">
				<view class="per-avatar">
					<!-- 头像  mode:头像类型,square圆角方形-->
					<u-avatar 
					:src="userInfo.avatar"
					mode="square" 
					img-mode="widthFix"
					:show-sex="true"
					size="large"
					></u-avatar>
				</view>
				<view class="per-account">
					<text>昵称:{{userInfo.name}}</text>
					<text>账号:{{userInfo.phone}}</text> 
				</view> 
			</view>
			<view class="per-desc card">
				<text >个性签名:  {{userInfo.desc}}</text>
			</view>
			<!-- 收藏关注 -->
			<view class="per-collection card">				
				<view class="card-item">
					<!-- navigator 页面跳转组件相当于<a> ...-->
					<navigator url="/subpages/myBlog/myBlog?pagetype=myblog" open-type="navigate">
						<u-icon name="file-text" color="skyblue" :size="cardItemIconFont" class="card-ico"></u-icon>
						<view class="card-right">
							我的博客
							<u-icon name="arrow-right" color="skyblue" :size="cardItemIconFont"></u-icon>
						</view>
					</navigator>
				</view>
				<view class="card-item">
					<navigator url="/subpages/myBlog/myBlog?pagetype=myinterest" open-type="navigate">
						<u-icon name="star" color="skyblue" :size="cardItemIconFont" class="card-ico"></u-icon>
						<view class="card-right">
							我的关注
							<u-icon name="arrow-right" color="skyblue" :size="cardItemIconFont"></u-icon>
						</view>
					</navigator>
				</view>
				<view class="card-item">
					<navigator url="/subpages/myBlog/myBlog?pagetype=mylike" open-type="navigate">
						<u-icon name="thumb-up" color="skyblue" :size="cardItemIconFont" class="card-ico"></u-icon>
						<view class="card-right">
							我赞过的
							<u-icon name="arrow-right" color="skyblue" :size="cardItemIconFont"></u-icon>
						</view>
					</navigator>
				</view>
			</view>
			
			<!-- 操作 -->
			<view class="per-operation card">
				<view class="card-item">
					<navigator url="/subpages/alterPerson/alterPerson" open-type="navigate">
						<u-icon name="setting" color="skyblue" :size="cardItemIconFont" class="card-ico"></u-icon>
						<view class="card-right">
							修改个人信息
							<u-icon name="arrow-right" color="skyblue" :size="cardItemIconFont"></u-icon>
						</view>
					</navigator>
				</view>
			</view>
			<u-button 
			shape="square" 
			:custom-style="outLoginBtnStyle"
			@click="toOutLogin"
			>
				注销
			</u-button>
		</view>
		<view class="login-wrap" v-else>
			<login></login>	
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar
		:list="tabbarList" 
		:mid-button="true"
		active-color="skyblue"
		>
		</u-tabbar>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import userInfo from '../../store/modules/userInfo';
	export default {
		data() {
			return {
				cardItemIconFont:'36', // icon字体大小 单位rpx
				outLoginBtnStyle: {		// 注销按钮样式
					color: "#fff",
					backgroundColor: "skyblue",
					borderRadius: "20rpx"
				}
			}
		},
		methods: {
			...mapMutations(['updataUserInfo']),
			
			//	注销
			toOutLogin() {
				this.updataUserInfo(null)
				//this.userInfo.token = ''
				//console.log(this.userInfo)
				
			}
		},
		computed: {
			...mapState({
				tabbarList: state => state.componStyle.tabbarList,	//  tabbar列表
				navBgStyle: state => state.componStyle.navBgStyle,	//	顶部导航栏样式
				userInfo: state => state.userInfo.userInfo,			//	用户信息
			})
		}
	}
</script>

<style lang="scss" scoped>
	
.personal {
	height: calc(100vh - var(--status-bar-height) - 50px);
	
	background-color: $uni-bg-color-qgray;
	.content {
		padding: 28rpx;
		
		.per-info {
			display: flex;
			
			.per-account {
				padding: 10rpx 0 10rpx 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 28rpx;
				color: $uni-text-color-personl;
			}
		}
		.card {
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			background-color: $uni-bg-color;
			margin-bottom: 20rpx;
			.card-item {
				font-size:36rpx;
				.card-right {
					width: 580rpx;
					display: inline-flex;
					justify-content: space-between;
					padding: 20rpx 0;
					margin-left: 20rpx;
					color: $uni-text-color-personl;
					border-bottom: 1rpx solid $uni-border-qgray;
				}
			}
		}
	}
	.login-wrap {
		height: 80%;
		padding-top: 30rpx;
	}
}
</style>
